<template>
  <div class="public" @mouseenter="addWater = true" @mouseleave="addWater = false">
    <span class="query_stat">查询统计</span>
    <div class="work_area_list" v-if="addWater" style="min-width: 180px;">
      <span @click="opendyclfy">人员作业率统计</span>
    </div>
    <div class="organization carInformation" v-if="dyclfy.show">
      <h2>
        <span class="iconfont icon-index-infor-"></span>
        <span>人员作业率统计</span>
        <i class="iconfont icon-guanbi" @click="zyltj.show = false"></i>
      </h2>
      <div class="top_box">
        <el-form :inline="true" :model="person" class="demo-form-inline">
          <el-form-item label="开始日期">
            <el-date-picker v-model="zyltj.startDate" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="结束日期">
            <el-date-picker v-model="zyltj.endDate" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label>
            <el-select v-model="zyltj.ClientName" placeholder="请选择分组">
              <el-option
                v-for="(item,index) in zyltj.clientList"
                :value="item.CLIENT_NO"
                :label="item.CLIENT_NAME"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="car_content">
        <!-- 统计列表 -->
        <el-table
          :data="zyltj.tableData"
          style="width: 100%"
          border
          highlight-current-row
          v-if="zyltj.listShow"
          height="477"
        >
          <!-- <el-table-column
            v-for="(item,index) in tableHead"
            :key="index"
            :label="item.label"
            :property="item.property"
            align="center"
          >-->
          <!-- <template slot-scope="scope">{{scope.row[scope.column.property]}}</template>
          </el-table-column>-->
          <el-table-column fixed prop="index" label="index" align="center" width="0px"></el-table-column>
          <el-table-column fixed prop="downloadUrl" label="文件下载列表" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import eventBus from '@/eventBus.js'
import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {
    return {

      addWater: false,
      zyltj: {
        startDate: '',//开始日期
        endDate: '',//结束日期
        show: false,//是否显示
        tableData: [],//列表数据
        clientList: [],//组织列表
        clientName: '',
        listShow: true//列表是否显示
      },
      //查询条件
      zyltjSearch: {
        dtpStartDate: '',
        dtpEndDate: '',
        ClientName: ''
      }
    }
  },
  created () {
    eventBus.$on('closeCover', val => (this.organization.show = val))
    this.getclientList()
  },
  methods: {
    //打开单一车辆费用统计
    openzyltj () {
      this.zyltj.show = true
      // console.log('11111111111111')
    },
    // 获得分组列表
    // async getGroupingList () {
    //   const { data } = await this.$Http.get(`/DataListCompany/GetCleanerGroupListApi?ClientNo=${this.$route.query.ClientNo}`)
    //   this.groupingList = data
    //   eventBus.$emit('warningGroup', data)
    // },
    async getclientList () {
      const { data } = await this.$Http.get(`/DataListCompany/GetCleanerGroupListApi?ClientNo=${this.$route.query.ClientNo}`)
      this.zyltj.clientList = data
      // console.log(data)
    },
    //单一车辆费用统计列表
    async getzyltjList () {
      debugger

      this.zyltjSearch = {
        dtpStartDate: this.zyltj.startDate,
        dtpEndDate: this.zyltj.endDate,
        ClientName: this.zyltj.clientName
      }
      let { data } = await this.$Http.get('/DataListCompany/GetDyclfyTjApi', { params: this.zyltjSearch })
      // let { data } = await this.$Http.get(`/DataListCompany/GetLisencePlateApi?ClientNo=${this.$route.query.ClientNo}`)
      // debugger
      // 原始数据
      this.zyltj.tableData = data
      // console.log(data)
    },

    changeColumn () {
      //   this.tableHead=[
      //   {
      //       label:'姓名',
      //       property:'name'
      //   },{
      //       label:'地址',
      //       property:'address'
      //   }
      // ]
      this.getDychfytjList()
    }
  }
}
</script>

<style scoped lang='less'>
.public {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: relative;
   text-align: center;
  border-right:2px solid #eee;
  cursor: default;
  & > span:hover {
    color: #eee;
  }
}
.work_area_list {
  min-width: 140px;
  // height: 78px;
  border: 1px solid #ccc;
  background-color: #f3f3f3;
  position: absolute;
  top:25px;
  z-index: 22;
  span {
    display: block;
    padding: 0 10px 0 20px;
    line-height: 26px;
    color: #333;
    &:hover {
      color: #fff;
      background-color: #2ea9fa;
    }
  }
}
.organization {
  width: 70%;
  height: 460px;
  padding: 0;
  padding-bottom: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  position: fixed;
  left: 50%;
  top: 130px;
  transform: translateX(-50%);
  z-index: 99;
  h2 {
    line-height: 30px;
    border-bottom: 1px solid #ccc;
    padding-left: 10px;
    color: #666;
    span {
      margin-right: 5px;
    }
    i {
      float: right;
      margin-right: 10px;
    }
  }
  .organization_content {
    height: calc(~'100% - 33px');
  }
}
.top_box {
  height: 40px;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  padding-left: 20px;
  .el-form {
    height: 26px;
    .el-input {
      width: 150px;
    }
    .el-select {
      width: 150px;
    }
    /deep/.el-form-item {
      vertical-align: baseline;
      .el-button /deep/ span {
        margin-left: 0;
      }
    }
  }
}
.car_content {
  //   width: 100%;
  //   height: 492px;
  height: calc(~'100% - 63px');
  overflow: auto;
  //   overflow-x: auto;
  //   overflow-y: auto;
  .new_person {
    width: 400px;
    height: 450px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin: 15px auto;
    box-shadow: 0 0 5px 2px #ccc;
    .icon-guanbi {
      float: right;
      margin-right: 10px;
    }
    .el-form {
      width: 260px;
      height: 180px;
      margin: 10px auto;
      background-color: #fff;
      .el-form-item {
        margin-bottom: 20px;
      }
      .btns {
        display: flex;
        align-items: center;
        justify-content: center;
        // padding-top: 10px;
        .el-button {
          margin: 0 10px;
          /deep/span {
            padding: 0 5px;
          }
        }
      }
    }
  }
}
</style>